<template>
	<view>

		<view class="page-body">
			<form @submit="formSubmit" @reset="formReset">

				<view class="page-section">
					<view class="input-list">
						<view class="uni-list-cell">
							<input class="uni-input" name="input"  v-model="account" placeholder="用户名" />
						</view>
					</view>
					<view class="input-list">
						
						<view class="uni-list-cell">
							<input class="uni-input" name="password" v-model="password"  placeholder="请输入密码" :password="showPassword" />
							<view class="uni-icon uni-icon-eye" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>
						</view>
					</view>
					
				</view>

				<view class="btn-area">
					<button class="btn-submit" formType="submit" :loading="loading">登录</button>
					<button type="default" @tap="navigateTo()">注册</button>
					<button type="default" @tap="toBack()" >取消</button>

				</view>
			</form>
		</view>
	</view>
</template>
<script>
	import CryptoJS from "../../components/crypto-js";
	 import {
        mapState,
        mapMutations
    } from 'vuex'
	export default {
		data() {
			return {
				title: 'form',
				pickerHidden: true,
				chosen: '',
				account: '',
        password: '', 
				money:'',
				showPassword: true,
				loading:false,
				token:'',
				inviteCode:'',
				member:'',
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName', 'apiUrl', 'gameApiUrl', 'gameApiId', 'gameApiSecret','member']),
		onLoad() {
			console.log('now666:' + this.apiUrl);
		},
		methods: {
			 ...mapMutations(['login','back','storeMoney','storeToken','storeInviteCode','storeMember']),
			pickerConfirm: function(e) {
				this.pickerHidden = true
				this.chosen = e.target.value
			},
			pickerCancel: function(e) {
				this.pickerHidden = true
			},
			pickerShow: function(e) {
				this.pickerHidden = false
			},
			formSubmit: function(e) {
				if (this.account.length < 5) {
                    uni.showToast({
                        icon: 'none',
                        title: '账号最短为 5 个字符'
                    });
                    return;
                }
                if (this.password.length < 6) {
                    uni.showToast({
                        icon: 'none',
                        title: '密码最短为 6 个字符'
                    });
                    return;
                }
				const data = {
                    name: this.account,
                    password: this.password,
					          act:'login'
                };
				this.loading = true;
				uni.request({
					url: this.apiUrl + 'app/login',
					method: 'POST',
					data: data,
					success: (data) => {
						console.log('fail' + JSON.stringify(data));

						//{"code":1,"msg":"\u767b\u5f55\u6210\u529f","data":{"member":{"id":444,"name":"lumen123","real_name":"\u5510sss","email":null,"phone":null,"qq":null,"weixin":null,"address":null,"money":"0.00"},"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9tLmNodWFucWk2NjgueHl6XC9hcHBcL2xvZ2luIiwiaWF0IjoxNTM4MjA2NjA2LCJleHAiOjE1MzgyMTAyMDYsIm5iZiI6MTUzODIwNjYwNiwianRpIjoiTjdpa3FMY2RnVUdKazhaMyIsInN1YiI6NDQ0LCJwcnYiOiI4NjY1YWU5Nzc1Y2YyNmY2YjhlNDk2Zjg2ZmE1MzZkNjhkZDcxODE4Iiwiand0bmFtZSI6Im1lbWJlciJ9.zxXBXGl-lQ9Dq9Mk9-b2PBaf_n__Zb14Eqg5iSw0ezQ"}}
						let msg = data.data.msg;
						uni.showToast({
							icon: 'none',
							title: msg
						});
						if (data.data.code == 1) {
							
							this.money = data.data.data.member.money.toString();
							this.token = data.data.data.token.toString();
							this.inviteCode =  data.data.data.member.invite_code.toString();
							this.member = JSON.stringify(data.data.data.member);
							this.toMain(this.account,this.money,this.token,this.inviteCode,this.member );
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					},
					complete: () => {
						this.loading = false
					}
				})
				
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
				
			},
			 toMain(userName,mainMoney,token,inviteCode,member) {
                this.login(userName);
								this.storeMoney(mainMoney);
								this.storeToken(token);
                this.storeInviteCode(inviteCode);
								this.storeMember(member);
               uni.reLaunch({
               	url: '../index/index',
               });
            },
			toBack() {
				uni.navigateBack();
			},
			navigateTo() {
				uni.navigateTo({
					url: 'register'
				})
			},
			changePassword: function () {
				this.showPassword = !this.showPassword;
			}
		}
	}
</script>

<style>
	@import "../../common/icon.css";
	label {
		display: flex;
		flex-direction: row;
		min-width: 270upx;
		margin-right: 20upx;
	}

	page {
		background-color: white;
		padding-top: 50upx;

	}
	.uni-list-cell{
		padding:0upx 30upx;
	}
	.uni-icon-eye:before {
		content: '\e568';
	}

	.btn-submit {
		background-color: #007aff;
		color: #ffffff;
	}

	.uni-input {
		width: 80%;
		padding-left: 30upx;
	}

	.uni-list:before {
		position: absolute;
		z-index: 10;
		right: 0;
		top: 0;
		left: 0;
		height: 0rpx;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;

	}
	uni-list-cell:after {
		position:absolute;
		right:30rpx;
		bottom:0;
		left:30rpx;
		height:1rpx;
		content:'';
		-webkit-transform:scaleY(.5);
		transform:scaleY(.5);
		background-color:#c8c7cc;

}

</style>
